import Vue from 'vue'
import Vuex from 'vuex'
import {
	version,
	title,
	baseUrl,
	storageKey
} from '@/config/index.js'
import tabbar from '@/config/tabbar/index.js'

Vue.use(Vuex);

// 本地存储数据，通过配置存储键名取
let storageData = uni.getStorageSync(storageKey) || {};
// 需要永久存储，且下次APP启动需要取出的，在state中的变量名
let saveStateKeys = ['vuex_user', 'vuex_token'];

// 加上vuex_前缀，是防止变量名冲突，也让人一目了然
const store = new Vuex.Store({
	// import { mapState } from 'vuex'
	// 映射 this.vuex_user 为 store.state.vuex_user
	// computed: { ...mapState(['vuex_user']) }
	// 直接获取 this.$store.state['vuex_user']
	state: {
		// 如果上面从本地获取的storageData对象下有对应的属性，就赋值给state中对应的变量
		vuex_user: storageData.vuex_user || {},
		vuex_token: storageData.vuex_token || '',
		// 如果无需保存到本地永久存储，可直接定义属性
		vuex_version: version,
		vuex_title: title,
		vuex_baseUrl: baseUrl,

		// 底部导航栏菜单
		vuex_tabbar: tabbar,
		// 注册支付表单数据
		vuex_form_data: {
			isPublish: false, // 是否发布
			isTourist: true, // 游客访问
		},
		// 微信jssdk
		vuex_jwx: {},
	},
	mutations: {
		// import { mapMutations } from 'vuex'
		// 将 `this.setVuexStore({})` 映射为 `this.$store.commit('setVuexStore', {})`
		// methods: { ...mapMutations(['setVuexStore']) }
		// 设置修改 this.$store.commit('setVuexStore', {name, value})
		setVuexStore(state, payload) {
			// 判断是否多层级调用，state中为对象存在的情况，诸如user.info.score = 1
			let nameArr = payload.name.split('.');
			let saveKey = '';
			let len = nameArr.length;
			if (len >= 2) {
				let obj = state[nameArr[0]];
				for (let i = 1; i < len - 1; i++) {
					obj = obj[nameArr[i]];
				}
				obj[nameArr[len - 1]] = payload.value;
				saveKey = nameArr[0];
			} else {
				// 单层级变量，在state就是一个普通变量的情况
				state[payload.name] = payload.value;
				saveKey = payload.name;
			}

			// 判断变量名是否在需要存储的数组中
			if (saveStateKeys.includes(saveKey)) {
				// 获取本地存储的storageData对象，将变量添加到对象中
				let storageData = uni.getStorageSync(storageKey) || {};
				storageData[saveKey] = state[saveKey];
				uni.setStorageSync(storageKey, storageData);
			}
		}
	}
})

export default store
